<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2853279_6qharwmdhk4.css">

</head>

<body>
    <div class="container">
        <div class="content">
            <ul>
                <li>
                    <img src="images/rap.png" alt="" width="99px">
                </li>
                <li>
                    <div class="border">
                        <label for="">邮箱</label>
                        <input type="text" placeholder="">
                        <i class="iconfont">&#xe600;</i>
                    </div>
                </li>
                <li>
                    <div class="border">
                        <label for="">密码</label>
                        <input type="text" placeholder="">
                        <i class="iconfont">&#xe8c7;</i>
                    </div>
                </li>
                <li>
                    <div class="border">
                        <label for="">验证码</label>
                        <input type="text" placeholder="">
                        <i class="iconfont">&#xe60d;</i>
                    </div>
                </li>
                <li>
                    <div> <img src="images/captcha.svg" alt=""></div>
                    <div><button>注册</button><button>登录</button></div>

                </li>
                <li>
                    <div><a href="">忘记密码?</a></div>
                </li>
            </ul>
        </div>
    </div>
    <script>
        var inputs = document.querySelectorAll('li input');
        var labels = document.querySelectorAll('li .border label');
        var borders = document.querySelectorAll('li .border')
        console.log(borders)
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].index=i;
            inputs[i].onfocus = function () {
                
                var index=this.index;
                console.log(borders[index]);
                borders[index].style.borderBottom = "2px solid #5867bc"
                if(index == 0){
                    this.placeholder = 'email';
                }
                
                labels[index].classList.add('fo');
            }
            inputs[i].onblur = function(){
                var index=this.index;
                this.placeholder = '';
                labels[index].classList.remove('fo');
                borders[index].style.borderBottom = ""
            }
        }
    </script>
</body>

</html>